import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import './app-visual-input.less';

/**
 * @description 虚拟表单输入框
 * @export
 * @class AppVisualInput
 * @extends {Vue}
 */
@Component({})
export class AppVisualInput extends Vue {

  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualInput
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualInput
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualInput
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualInput
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualInput
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualInput
   */
  @Prop() realCompRef!: any;

  /**
   * @description 输入框类型
   * @type {string}
   * @memberof AppVisualInput
   */
  public type: string = 'text';

  /**
   * @description 生命周期初始化
   * @memberof AppVisualInput
   */
  public created() {
    switch (this.editorInstance?.editorType) {
      case 'PASSWORD':
      case 'TEXTAREA':
      case 'TEXTAREA_10':
      case 'NUMBER':
      case 'TEXTBOX':
        this.type = 'text';
        break;
    }
  }

  /**
   * @description 值改变
   * @param {string} value
   * @memberof AppVisualInput
   */
  public onChange($event: any) {
    this.$emit('change', { name: this.name, value: $event?.target.value });
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualInput
   */
  public render() {
    return (
      <div class={'app-visual-input luckysheet-mousedown-cancel'}>
        <input
          type="text"
          class="input__inner luckysheet-mousedown-cancel"
          value={this.value}
          style={{
            height: `${this.position.height}px`
          }}
          onBlur={($event: any) => { this.onChange($event) }}
        >
        </input>
      </div>
    );
  }
}
